<template>
  <div id="login">
    <el-card class="box-card" shadow="always">
      <div class="common-layout">
        <el-container style="height: 435px;">
          <el-aside style="background-color: #3f3f3f;height: 100%;" width="350px"></el-aside>
          <el-main>
            <el-form
              label-position="right"
              label-width="100px"
              :model="formLabelAlign"
              style="max-width: 460px;margin-top: 150px;"
            >
              <el-form-item label="账号:">
                <el-input v-model="formLabelAlign.username" />
              </el-form-item>
              <el-form-item label="密码:">
                <el-input v-model="formLabelAlign.password" />
              </el-form-item>
            </el-form>
            <!-- 提交按钮 -->
            <el-button @Click="submitFn" class="submit" round type="primary">登录</el-button>
          </el-main>
        </el-container>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import request from '../../utils/axios';
import {useRouter,useRoute} from 'vue-router';
import { useStore } from 'vuex'
import md5 from 'js-md5';

const store = useStore();
const router = useRouter();
const route = useRoute();

// 登录数据
const formLabelAlign = reactive({
  username: 'admin',
  password: '123456',
})
// 登录
const submitFn = ()=>{
  // 密码加密
  let password = md5.md5(formLabelAlign.password)
  request.post("/admin/employee/login",{
    username: formLabelAlign.username,
    password
  }).then((res)=>{
    // 将用户信息存入内存中
    store.commit("setUserinfo",res.data)
    // 登录成功,将信息存入本地
    localStorage.setItem("userinfo",JSON.stringify(res.data));
    // 跳转到home页面
    router.push("/home");
    console.log("登录成功",res);
  })
}
</script>

<style scoped>
#login {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #444444;
}

.box-card {
  width: 900px;
  height: 480px;
  border-radius: 1%;
  box-shadow: 2px -1px 16px -1px pink;
}

.submit {
  width: 350px;
  margin-left: 100px;
}
</style>